<style lang="scss" scoped>
.van-row {
  width: 100%;
}

/*背景图片*/
.login-main-bg {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
}

.login-box {
  overflow: hidden;
  color: #1a4f6b;
  border: 0px !important;
  padding: 0px 22px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  -webkit-box-orient: vertical;
  position: absolute;
  width: 100%;
  top: 20%;
  // top: auto;
  height: auto;

  .logo-company {
    width: 30%;
  }


  .login-header {
    text-align: center;
    padding-bottom: 20px;
    .login-header-img{
      width: 50px;
      height: 50px;
      position: absolute;
      left: 36px;
      top: 5px;
    }
    .login-header-txt {
      margin-top: 12px;
      font-size: 16px;
      color: #f5f5f5;
      font-weight: 500;
    }

  }

  .head-op-text-big {
    font-size: 16px;
  }

  .logoCompany {
    width: 4rem;
  }

  .login-form {
    border: 0px !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    margin-bottom: 22px;
    padding: 20px;

    .rowborder {
      border-bottom: 1px solid #E0E0E0;
    }

    .van-row {
      padding-bottom: 10px;
      margin-top: 10px;
    }

    .van-row:first-child {
      margin-top: 0px !important;
    }

    .checkbox {
      float: right;
      margin-right: 10px;
      font-size: 14px;
      font-weight: bold;
    }

    /deep/ .van-field {
      .van-field__control {
        border: 0px;
      }

      .van-field__label {
        font-weight: bold;
        width: 2.5em;
      }

      .van-field__left-icon {
        font-size: 24px !important;
        line-height: 100%;
      }

      .van-cell__title,
      .van-field__control {
        font-size: 16px !important;
      }

      .van-checkbox__label {
        margin-left: 5px;
      }
    }
  }



  .login-form:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }

  .btn-login {
    background: linear-gradient(135deg, #39a9f4 0%, #0c6ec9 100%);
    box-shadow: 0px 8px 20px -6px rgba(93, 126, 252, 0.5);

    .van-button__text {
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 10px;
    }
  }

  .btn-login:hover {
    background: #0b75f1;
  }

  .van-cell__title,
  .van-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

.login-footer {
  position: absolute;
  bottom: 16px;
  width: 100%;
  text-align: center;
  color: #d1d1d1;
}
.login-footer-txt {
  font-size: 13px;
}
</style>

<template>
  <div>
    <van-image  :src="resources.logoMainBg" class="login-main-bg" />
    <div class="login-box">
      <!--表单-->
      <van-row>
        <van-col span="24">
          <van-form @submit="handleSubmit" class="login-form" id="loginForm" >
            <!--头部-->
            <van-row class="login-header" type="flex" justify="center" style="    font-size: 18px; font-weight: bold; color: #2c80cb;">
              <van-image class="login-header-img" fit="contain" :src="resources.logoCompany" />
              <span>欢迎使用</span>
            </van-row>
            <van-row  class="rowborder">
              <van-col span="24">
                <van-field
                  v-model="username"
                  ref="username"
                  name="username"
                  label="账号"
                  :border="false"
                  autocomplete="off"
                  type="text"
                  placeholder="请输入账号"
                >
                  <template #left-icon>
                    <svg-icon icon-class="user" />
                  </template>
                </van-field>
              </van-col>
            </van-row>

            <van-row  class="rowborder"  >
              <van-col span="24">
                <van-field
                  v-model="password"
                  ref="password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="请输入密码"
                  autocomplete="new-password"
                >
                  <template #left-icon>
                    <svg-icon icon-class="lock" />
                  </template>
                </van-field>
              </van-col>
            </van-row>

            <van-row justify="end">
              <van-col span="24" >
                <van-checkbox v-model="autologin" class="checkbox">自动登录</van-checkbox>
              </van-col>
            </van-row>
            <van-row   type="flex" justify="space-around" >
              <van-col span="24">
                <van-button  size="large" type="info"  round native-type="submit" class="btn-login">
                  登录
                </van-button>
              </van-col>
            </van-row>
          </van-form>
        </van-col>
      </van-row>
    </div>
  <!--底部-->
      <van-row class="login-footer" type="flex" justify="center">
        <van-col span="24" style="font-size: 11px">
          {{settings.title}}
        </van-col>
        <van-col span="24" style="font-size: 11px">
          移动端版本: {{settings.versionApp}}
        </van-col>
        <van-col span="24" style="font-size: 9px">
          长沙任优信息技术有限公司
        </van-col>
      </van-row>
  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, Form, Dialog  } from 'vant'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      autologin: false,
      passwordType: 'password',
      isCheck: '1',
      resources: {
        /*eslint-disable*/
        logoCompany: require('@/assets/img/login/logo_center.png'),
        logoMainBg: require('@/assets/img/login/bg.png'),
      },
      showPopover: false,
      show: false,
      settings: require('@/settings.js')
    }
  },
  components: {
    DropdownMenu,DropdownItem, Form
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleSubmit(values) {
      //振动效果
      this.utils.vibrate()

      if (!this.username || this.username.length <1) {
        this.$refs.username.focus()
        this.$notify.warning('请输入用户名！')
        return
      }
      if (!this.password || this.password.length <1) {
        this.$refs.password.focus()
        this.$notify.warning('请输入密码！')
        return
      }


      this.utils.loadShow()
      const params = {
        code: values.username,
        password: values.password,
        isCheck: this.isCheck,
        deviceType: '2'
      }
      this.$ajax.get('/login', { params }).then(response => {
        this.utils.loadHide()
        if (response.code == 0 ) {
          if (response.data.checkResult == '1') {
            const { token } = response.data
            const user = response.data
            this.$store.dispatch('setCurrentUser', user)

            localStorage.setItem('username', this.username)
            localStorage.setItem('password', this.password)
            localStorage.setItem('autologin', this.autologin)

            this.$store.commit('SET_WORKBENCH_ACTIVE', true)
            this.$router.replace({ path: '/' }).catch(err => {
            })
          } else {
            this.loginConfirm(response.data.msg)
          }
        } else {
          this.isCheck = '1'
        }
      }).catch((err) => {
        this.utils.loadHide()
      })
    },

    loginConfirm(msg) {
      Dialog.confirm({
        title: '是否强行登录?该账号最新登录信息如下',
        message: msg,
        messageAlign: 'left'
      })
      .then(() => {
        this.isCheck = '0'
        this.handleSubmit({
          username: this.username,
          password: this.password
        })
      })
      .catch(() => {
      });
    },
  },
  beforeCreate() {
    this.utils.loadShow(true)
  },
  mounted(){
    $("#loginForm").hide()
    // //本地存储信息
    // this.username = localStorage.getItem('username') || ''
    // this.password = localStorage.getItem('password') || ''
    // this.autologin = localStorage.getItem('autologin') || 'false'
    // this.autologin = JSON.parse(this.autologin)

    $("#loginForm").delay("666").fadeIn(() => {
      this.utils.loadHide()
      if (this.autologin) {
        this.isCheck = '0'
        this.handleSubmit({
          username: this.username,
          password: this.password
        })
      } else {
        setTimeout(() => {
          if(!this.username || this.username.length <3){
            this.$refs.username.focus();
          }else {
            this.$refs.password.focus();
          }
        }, 500)
      }
    })
  }
}
</script>
